@charset "utf-8";

/* all
--------------------------------------------------------------*/
* {
  margin:0;
  padding:0;
}

html,body{
  margin:0;
  padding:0;
  overflow-x: hidden;
  position: relative;
  font-family: "宋体""sans-serif";
  font-size: 100%;
  color: #000;
}
_:-ms-lang(x)::-ms-backdrop, html,body {/* IE11のみ */
  font-family: "宋体", "sans-serif";
}

/* link */
a {
  text-decoration: none;
  color: #000;
  transition : all 300ms;
}
a:hover {text-decoration: underline;}
a:hover img {opacity: 0.8;}

/* img */
img {line-height: normal;}

/* list */
ul,ol {list-style: none;}

/* h */
h1, h2, h3, h4, h5, h6 {font-weight:bold;}

/* sup & sub */
sup,sub {font-size: small;}

/* clear */
.clear {clear: both;}
.clear::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}

/* float */
.floatLeft {float: left;}
.floatRight {float: right;}

/* color */
.red {color:  #f00;}
.grey {color: #555;}

/* br pc/sp */
br.pc{display:block;}
br.sp{display:none;}

/* table */
.table table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border-top:solid #ccc 1px;
}
.table table th,
.table table td {
  padding:7px 10px;
  border-bottom:solid #ccc 1px;
  line-height:normal;
}
.table table th {
  background-color:#eee;
  font-weight:normal;
  width:30%;
}
.table table td {
  text-align:left;
  background-color:#fff;
}
.table table td:nth-child(3),
.table table td:nth-child(4) {
  border-left:solid #ccc 1px;
}

@media only screen and (max-width:768px) {
  .floatLeft,
  .floatRight {float: none;}
}

@media only screen and (max-width:480px) {
  .table table th,
  .table table td {
	font-size:14px;
  }
  br.pc{display:none;}
  br.sp{display:block;}
}

/* wrapper
--------------------------------------------------------------*/
#wrapper {background-color:#f6f6f6;margin-top: 40px;}

/* header
--------------------------------------------------------------*/

/* section common
--------------------------------------------------------------*/
section {
  font-size:18px;
  margin:120px auto 0;
  position:relative;
  width:1100px;
}
section::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}
section h3 {
  font-size:36px;
  margin-bottom:50px;
}
section h3 span {
  font-size:20px;
  font-weight:normal;
  margin-left:1em;
}
section h4.h4Spec {
  font-size:20px;
  color:#736357;
  margin-bottom:10px;
}
section h4.h4Feature {
  font-size:24px;
  color:#1d2084;
  position:relative;
  text-align:center;
  margin-bottom:10px;
}
section h4.h4Feature span {
  position:relative;
  z-index:2;
  display: inline-block;
  margin: 0 1em;
  padding: 0 1em;
  background-color:#f6f6f6;
}
section h4.h4Feature::before {
  content: '';
  position: absolute;
  z-index:1;
  display: block;
  top: 50%;
  width: 100%;
  height: 2px;
  border-top: solid 1px #e00012;
  border-bottom: solid 1px #e00012;
}
section p.h3FeatureBg {
  color:rgba(0,0,0,0.1);
  font-size:72px;
  font-family:"Times New Roman", Times, serif;
  position:absolute;
  top:-24px;
  right:0;
}
section h4.h4Tech {
  color:#fff;
  font-size:18px;
  background-color:#009fe8;
  text-align:center;
  padding:2px 0;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  margin-bottom:20px;
}
@media only screen and (max-width:1099px) {
  section {
    width:94%;
  }
}
@media only screen and (max-width:768px) {
  section {
	width:90%;
  }
  section h3 {
	margin-bottom:10px;
  }
  section p.h3FeatureBg {
	font-size:40px;
	left:0;
	top:-1.2em;
  }
}
@media only screen and (max-width:480px) {
  section {
	font-size:16px;
  }
  section h3 {
	margin-bottom:20px;
	font-size:30px;
  }
  section h3 span {
    display:block;
	margin:0 0 10px 0;
	font-size:18px;
  }
  section p.h3FeatureBg {
	font-size:30px;
  }
  section h4.h4Feature {
	font-size:20px;
  }
}

/* section mainimage
--------------------------------------------------------------*/
section.mainimage {
  margin:0 auto;
  width:100%;
  background:url(../img/bg_mainimage.png) no-repeat;
  background-size:auto;
  position:relative;
  background-position: center bottom;
  padding-top:80px;
}
section.mainimage .mainimageBox {
  margin:0 auto 100px;
  width:1100px;
  height:calc(100vh - 180px);
}
section.mainimage .mainimageHead {
  float:left;
  width:56%;
  position:relative;
  margin-top:25vh;
}
section.mainimage .mainimageHead h2 {
  font-size:40px;
  line-height:1.1;
  margin-bottom:30px;
}
section.mainimage .mainimageHead h2 span {
  color:#908075;
  font-size:50%;
}
section.mainimage .mainimageHead h2 img {
  width:100%;
  margin-top:30px;
}
section.mainimage .mainimageHead .sub {
  font-weight:bold;
  font-size:24px;
  background: linear-gradient(transparent 70%, #bae4f4 70%);
  display:inline-block;
  padding:0 10px;
}
section.mainimage .productImage {
  float:right;
  width:42%;
  position:relative;
}
section.mainimage .productImage .first {
  position:absolute;
  top:100px;
  right:2vw;
  background-color:#e50012;
  color:#fff;
  font-weight:bold;
  font-size:24px;
  text-align:center;
  display:block;
  width:96px;
  height:96px;
  line-height:96px;
  border:solid 3px #fff;
  -webkit-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
}
section.mainimage .productImage .first::before {
  content: '';
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border:solid 3px #e50012;
  position:absolute;
  top:-6px;
  left:-6px;
  -webkit-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
}
section.mainimage .productImage .photo {margin:15vh 0 0;}
section.mainimage .productImage img {width:100%;}

@media only screen and (max-width:1099px) {
  section.mainimage .mainimageBox {width:94%;}
}
@media only screen and (max-width:768px) {
  section.mainimage {background-image:url(../img/bg_mainimage_sp.png);}
  section.mainimage .mainimageBox {width:90%;}
  section.mainimage .mainimageHead,
  section.mainimage .productImage {float:none;}
  section.mainimage .mainimageHead {
    width:100%;
	margin-top:0;
	padding-top:3vh;
  }
  section.mainimage .productImage {width:54%; margin:5vh auto 0;}
  section.mainimage .productImage .photo {margin-top:0;}
  section.mainimage .productImage .first {top:0; right:0;}
}
@media only screen and (max-width:480px) {
  section.mainimage {background-size: auto 55%;}
  section.mainimage .mainimageHead {padding-top:1vh;}
  section.mainimage .mainimageHead h2 {font-size:20px; margin-bottom:15px;}
  section.mainimage .mainimageHead h2 span {font-size:70%;}
  section.mainimage .mainimageHead h2 img {margin-top:15px; width:90%;}
  section.mainimage .mainimageHead .sub {font-size:16px;}
  section.mainimage .productImage {width:72%; margin:5vh auto 0;}
  section.mainimage .productImage .first {
	font-size:16px;
	width:72px;
	height:72px;
    line-height:72px;
  }
}

/* section description
--------------------------------------------------------------*/
section.description {
  margin-top:120px;
}
section.description p.strong {
  color:#e50012;
  font-weight:bold;
  font-size:20px;
}

/* section portable & unit
--------------------------------------------------------------*/
section img {
  width:100%;
  padding:0;
  margin:0;
  display:block;
}
section .product {margin-bottom:50px;}
section .product::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}
section .productL {
  width:370px;
  float:left;
  position:relative;
}
section .productL .mark {
  position:absolute;
  top:0;
}
section .productL .mark li {
  width:90px;
  height:70px;
  padding-top:20px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  border:solid 2px #fff;
  background-color:#ee8a1e;
  margin-bottom:10px;
  line-height:1.5;
  box-shadow: 2px 2px 7px rgba(0,0,0,0.2);
}
section .productR {
  width:650px;
  float:right;
}
section .productR ul {
  margin-bottom:30px;;
}
section .productR ul li::before {
  content:'●';
  color:#ee8a1e;
  margin-right:0.1em;
}
section .productR p{
  margin-bottom:30px;
}
section .productR .portableIntro p {
  float:right;
  width:380px;
}
section.portable .feature1,
section.portable .feature2,
section.unit .feature1,
section.unit .feature2 {
  max-width:510px;
  width:48%;
  margin-bottom:50px;
}
section.portable .feature1,
section.unit .feature1 {float:left;}
section.portable .feature2,
section.unit .feature2 {float:right;}
section.unit .feature2 {margin-bottom:0;}
section.portable .feature3 ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
section.portable .feature3 ul li {
  width:30%;
  max-width:330px;
  text-align:center;
  font-weight:bold;
  font-size:20px;
}
section.portable .feature3 ul li img {margin-top:10px;}
section.unit .feature1 ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
section.unit .feature1 ul li {
  max-width:160px;
  width:32%;
  margin-bottom:14px;
}

@media only screen and (max-width:1099px) {
  section .productL {width:36%;}
  section .productR {width:58%;}
  section .productR .portableIntro p {width:50%;}
  section.unit .feature1 ul li {max-width:32%;}
}
@media only screen and (max-width:768px) {
  section .productR .portableIntro p {width:40%;}
  section.portable .feature1,
  section.portable .feature2,
  section.unit .feature1,
  section.unit .feature2 {
    width:100%;
	max-width:100%;
	float:none;
  }
}
@media only screen and (max-width:480px) {
  section .productL,
  section .productR {
    width:100%;
	float:none;
  }
  section .productL {margin-bottom:30px;}
  section .productL p img{
	width:60%;
	margin:0 auto;
  }
  section .productR .portableIntro p {width:100%;}
  section.unit .feature1 ul li {margin-bottom:2%;}
  section.portable .feature3 ul li {
    width:100%;
	margin-bottom:30px;
  }
  section.portable .feature3 ul li:last-child {margin-bottom:0;}
}

/* section tech
--------------------------------------------------------------*/
section.tech .feature1 .cutL,
section.tech .feature1 .cutR,
section.tech .feature2,
section.tech .feature3 {
  max-width:510px;
  width:48%;
  margin-bottom:50px;
}
section.tech .feature1 .cutL,
section.tech .feature2,
section.tech .tech2 {float:left;}
section.tech .feature1 .cutR,
section.tech .feature3,
section.tech .tech3 {float:right;}
section.tech .nozzle {
  border:solid 1px #ccc;
  background-color:#fff;
  padding:15px 20px;
  margin-top:30px;
}
section.tech .nozzle .nozzleImage {
  float:left;
  width:42%;
  text-align:center;
  font-size:14px;
}
section.tech .nozzle .nozzleText {
  float:right;
  width:54%;
}
section.tech .feature2 h5 {
  color:#e50012;
  font-size:16px;
  margin-bottom:5px;
}
section.tech .feature2 .slit {margin-bottom:20px; text-align:center;}
section.tech .feature2 .slit p {float:left; width:30%;}
section.tech .feature2 .slit ul {float:right; width:70%;}
section.tech .feature2 .slit ul li {float:left;}
section.tech .feature2 .slit ul li:nth-child(1) {width:calc(50% - 13px); margin-right:13px;}
section.tech .feature2 .slit ul li:nth-child(2) {width:50%; font-size:14px;}
section.tech .feature3 .noslit {margin-bottom:20px; text-align:center;}
section.tech .feature3 .noslit p {float:left; width:34%;}
section.tech .feature3 .noslit ul {float:right; width:65%;}
section.tech .feature3 .noslit ul li {float:left;}
section.tech .feature3 .noslit ul li:nth-child(1) {width:100%; margin-bottom:5px;}
section.tech .feature3 .noslit ul li:nth-child(2) {width:48%; margin-right:4%;}
section.tech .feature3 .noslit ul li:nth-child(3) {width:48%; font-size:14px;}
section.tech .tech1 {
  margin-bottom:50px;
}
section.tech .tech1 .table table td {text-align:center;}
section.tech .tech1 ul {
  font-size:16px;
  margin-left:1em;
  margin-top:10px;
}
section.tech .tech1 ul li {
  text-indent:-1em;
}
section.tech .tech2,
section.tech .tech3 {margin-bottom:50px;}
section.tech .tech2 {
  width:66%;
  max-width:700px;
}
section.tech .tech2 ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
section.tech .tech2 ul li {
  width:48%;
  max-width:340px;
  text-align:center;
  font-size:16px;
  font-weight:bold;
}
section.tech .tech3 {
  width:30%;
  max-width:330px;
}
section.tech .tech3 p.image {
  margin-bottom:15px;
}
section.tech .tech3 p.text {
  font-size:16px;
}
/* ref */
section.tech .ref {
  background-color:#fff;
  padding:15px 20px;
  font-size:14px;
  margin-bottom:100px;
}
section.tech .ref ol {
  counter-reset:item;
}
section.tech .ref ol li {
  position:relative;
  padding-left:30px;
}
section.tech .ref ol li::before {
  counter-increment: item;
  content: '※'counter(item);
  text-align:center;
  display:inline-block;
  left:0;
  position:absolute;
}
/* effect */
section.tech .effect {
  background-color:#efeadc;
  padding:20px;
  position:relative;
}
section.tech .effect h4,h4Effect {
  color:#fff;
  background-color:#83bd3f;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  display:inline-block;
  padding:2px 30px;
  position:absolute;
  top:-15px;
}
section.tech .effect ol {
  display:flex;
  flex-wrap:wrap;
  margin-top:10px;
  counter-reset:item;
}
section.tech .effect ol li {
  width:50%;
  margin-top:10px;
  position:relative;
  padding-left:35px;
}
section.tech .effect ol li:nth-child(even) {
  width:calc(49% - 70px);
  margin-left:1%;
}
section.tech .effect ol li:nth-child(1),
section.tech .effect ol li:nth-child(4) {
  color:#e41c24;
  font-weight:bold;
}
section.tech .effect ol li::before {
  counter-increment: item;
  content: counter(item);
  font-weight: bold;
  color:#fff;
  text-align:center;
  background-color:#005bab;
  width:28px;
  height:28px;
  line-height:28px;
  display:inline-block;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  left:0;
  position:absolute;
}
section.tech .effect ol li:nth-child(1)::before,
section.tech .effect ol li:nth-child(4)::before {
  background-color:#e41c24;
}

@media only screen and (max-width:1099px) {
  section.tech .effect ol {
	display:block;
	margin-top:15px;
  }
  section.tech .effect ol li,
  section.tech .effect ol li:nth-child(even) {
	width:calc(100% - 35px);
	margin-left:0;
  }
}
@media only screen and (max-width:768px) {
  section.tech .feature1 .cutL,
  section.tech .feature1 .cutR,
  section.tech .feature2,
  section.tech .feature3,
  section.tech .tech2,
  section.tech .tech3 {
	width:100%;
	max-width:100%;
	float:none;
  }
  section.tech .tech3 p.image,
  section.tech .tech3 p.text {width:49%;}
  section.tech .tech3 p.image {float:left;}
  section.tech .tech3 p.text {float:right;}
}
@media only screen and (max-width:480px) {
  section.tech .tech2 ul li {width:100%;}
  section.tech .tech2 ul li:first-child {margin-bottom:20px;}
  section.tech .tech3 p.image,
  section.tech .tech3 p.text {
    float:none;
	width:100%;
  }
  section.tech .effect {font-size:18px;}
  section.tech .effect h4,h4Effect{
	top:-35px;
	line-height:1.3;
	padding:10px 30px;
	display:block;
	width:calc(100% - 100px);
  }
  section.tech .effect ol {
	padding-top:5px;
  }
}

/* section contact
--------------------------------------------------------------*/
section.contact {
  width:100%;
  background-color:#ddd;
  padding:50px 0;
  font-size:16px;
}
section.contact .contactBox {
  width:1100px;
  margin:0 auto;
}
section.contact .contactL {
  width:630px;
  float:left;
}
section.contact .contactL .logoJp {
  width:420px;
  margin-bottom:10px;
}
section.contact .contactL .address {
  margin-bottom:10px;
}
section.contact .contactL .sample {
  background-color:#fff;
  border:solid 3px #ee8a1e;
}
section.contact .contactL .sample p {
  background-color:#ee8a1e;
  color:#fff;
  height:30px;
  line-height:30px;
  padding:0 15px;
}
section.contact .contactL .sample ul {
  margin-left:2em;
  margin-top:10px;
  margin-bottom:10px;
  margin-right:1em;
}
section.contact .contactL .sample li {
  text-indent:-1em;
}
section.contact .contactL .sample li:before {
  content:'●';
}
section.contact .contactL .sample li.btnContact {margin-top:10px;}
section.contact .contactL .sample li.btnContact a {
  display:block;
  background-color:#ee8a1e;
  width:300px;
  height:60px;
  line-height:60px;
  color:#fff;
  text-indent:0;
  text-align:center;
  margin-left:-1em;
  font-size:18px;
  border:solid 1px #ee8a1e;
}
section.contact .contactL .sample li.btnContact a:hover {
  text-decoration:none;
  background-color:#fff;
  color:#ee8a1e;
}
section.contact .contactL .sample li.btnContact:before {
  content:none;
}
section.contact .contactR {
  width:390px;
  float:right;
}
section.contact .contactR .showroom {
  background-color:#666;
  text-align:center;
  color:#fff;
  height:30px;
  line-height:30px;
}

@media only screen and (max-width:1099px) {
  section.contact .contactBox {width:90%;}
  section.contact .contactL {width:46%;}
  section.contact .contactR {width:50%;}
  section.contact .contactL .logoJp {width:100%;}
  section.contact .contactL .address {margin-bottom:20px;}
  section.contact .contactL .sample p {
	height:auto;
	line-height:1.5;
	padding:5px 15px;
  }
  section.contact .contactL .sample li.btnContact a {width:calc(100% + 1em);}
}
@media only screen and (max-width:767px) {
  section.contact .contactL,
  section.contact .contactR {float:none;}
  section.contact .contactL {width:100%;}
  section.contact .contactR {width:100%;}
  section.contact .contactL .sample {margin-bottom:20px;}
}
@media only screen and (max-width:767px) {
  section.contact .contactL,
  section.contact .contactR {float:none;}
  section.contact .contactL {width:100%;}
  section.contact .contactR {width:100%;}
  section.contact .contactL .sample {margin-bottom:20px;}
}


/* pagetop
--------------------------------------------------------------*/
#pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.7);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
}
#pagetop a {
  display: block;
  width: 50px;
  height: 50px;
}
#pagetop:before,
#pagetop:after {
  width: 20px;
  height: 4px;
  border-radius: 5px;
  position: absolute;
  display: block;
  background: #fff;
  content: '';
}
#pagetop:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  top: 22px;
  right: 9px;
}
#pagetop:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  top: 22px;
  left: 9px;
}
#pagetop span {display: none;}

@media only screen and (max-width:767px) {
  #pagetop {
    position: inherit;
    bottom: auto;
    right: auto;
    background: transparent;
    width: auto;
    height: auto;
    text-align: center;
  }
  #pagetop:before,
  #pagetop:after {
    display: none;
  }
  #pagetop a {
    width: 100%;
	height:80px;
    line-height: 80px;
	background-color:rgba(0,0,0,0.7);
  }
  #pagetop span {
    display: block;
    font-size: 18px;
    color: #fff;
  }
}


/* footer
--------------------------------------------------------------*/
footer {
 
  text-align:center;
  font-size:14px;
  color:#fff;
 
}


/* for print
--------------------------------------------------------------*/
@media print {
  body {
    width: 1280px;
    transform: scale(0.8);
    -ms-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: 0 0;
    zoom:0.7;
    -webkit-print-color-adjust: exact;
  }
}